<template>
  <load v-if="this.$store.state.isLoad"></load>
  <div class="recommend" v-else-if="!this.$store.state.isLoad">
    <van-swipe class="swipe" :autoplay="3000">
      <van-swipe-item
        v-for="(image, index) in banner"
        :key="index"
        @click="getId(image.jump_value, image.jump_type)"
      >
        <img
          class="banner"
          v-lazy="'https://images.weserv.nl/?url=' + image.img"
        />
      </van-swipe-item>
    </van-swipe>
    <div
      v-for="(item, index) in comicData"
      :key="index"
      @click="goDetail(item.comic_id)"
    >
      <comic
        :img="item.img"
        :name="item.title"
        :lable="item.styles[0].name"
        :id="item.sub_title"
        :num="item.comment_total"
      >
      </comic>
    </div>
  </div>
</template>

<script>
import load from "../components/Load.vue";
import comic from "../components/Comic.vue";
export default {
  name: "Recommend",
  components: {
    comic,
    load,
  },
  data() {
    return {
      banner: [],
      comicData: [],
    };
  },
  created() {
    // console.log(sessionStorage.getItem("user"));
    //轮播图数据
    this.axios({
      method: "get",
      url: "/Banner",
    })
      .then((res) => {
        // console.log("res ==>", res);
        this.banner = res.data.data;
        // console.log("this.banner ==>", this.banner);
      })
      .catch((err) => {
        console.log("err ==>", err);
      });
    //推荐漫画数据
    this.axios({
      method: "get",
      url: "/HomeRecommend",
    })
      .then((res1) => {
        // console.log('res1 ==>',res1);
        this.comicData = res1.data.data.list;
        // console.log(("this.comicData==>", this.comicData));
      })
      .catch((err1) => {
        console.log("err1 ==>", err1);
      });
  },
  methods: {
    goDetail(id) {
      this.$router.push({
        name: "Detail",
        query: {
          id: id,
        },
      });
    },
    getId(id, type) {
      let str = id.substr(19, 5);
      // console.log("str==>", str);
      if (type == 2) {
        this.$router.push({
          name: "Detail",
          query: {
            id: str,
          },
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.swipe {
  height: 171px;
  width: 343px;
  margin: 17.5px auto;
  border-radius: 8px;
  .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
    .banner {
      width: 100%;
    }
  }
}
</style>